<template>
  <div class="dataOverBox">
    <div class="navBox">
      <p>数据概览</p>
      <el-button type="primary" @click="goMian">+安排面试</el-button>
    </div>
    <div class="h">欢迎回来，这是您的实时数据概览</div>
    <div class="slectBox">
      <div class="slectLis">
        <p>职位</p>
        <el-select v-model="value1" placeholder="所有职位" style="width: 120px">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="slectLis">
        <p>时间范围</p>
        <el-select v-model="value2" style="width: 120px">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="slectLis" v-show="timeFlag">
        <p>开始日期</p>
        <el-date-picker
          style="width: 140px;"
          v-model="startTime"
          type="datetime"
          placeholder="开始日期"
        />
      </div>
      <div class="slectLis" v-show="timeFlag">
        <p>结束日期</p>
        <el-date-picker
          style="width: 140px;"
          v-model="endTime"
          type="datetime"
          placeholder="结束日期"
        />
      </div>
    </div>
    <div class="stats_row">
      <div class="statsBox">
        <div class="numTit">87</div>
        <span>本月面试</span>
        <div class="numTxt">↑10%</div>
      </div>
      <div class="statsBox">
        <div class="numTit">64%</div>
        <span>通过率</span>
        <div class="numTxt">↓45%</div>
      </div>
      <div class="statsBox">
        <div class="numTit">31</div>
        <span>本月面试</span>
        <div class="numTxt" style="color: #999;">→76%</div>
      </div>
      <div class="statsBox">
        <div class="numTit">35分钟</div>
        <span>本月面试</span>
        <div class="numTxt">↓5%</div>
      </div>
    </div>
    <div class="card">
      <div class="headerCard">最近面试</div>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="候选人" width="100" />
        <el-table-column prop="zhiwei" label="应聘职位" width="100" />
        <el-table-column prop="title" label="面试官" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="time" label="时长" />
        <el-table-column prop="flag" label="状态" >
          <template #default="scope">
            <span class="flagBox">{{ scope.row.flag }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果" >
          <template #default="scope2">
            <span class="flagBox">{{ scope2.row.result }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fen" label="得分" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default>
            <img src="../../assets/yulan.png"  style="width: 30px;cursor:pointer;margin-right: 6px;" alt="预览">
            <img src="../../assets/daochu.png" style="width: 30px;cursor:pointer;"  alt="导出">
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,watch, watchEffect} from 'vue'

const value1 = ref('') //提示
const value2 = ref('本年度') //提示
const startTime = ref('') // 开始日期
const endTime = ref('') // 结束日期
const timeFlag = ref(false)
const options1 = ref([
  {
    value: '前端工程师',
    label: '前端工程师',
  },
  {
    value: '后端工程师',
    label: '后端工程师',
  },
  {
    value: '全栈工程师',
    label: '全栈工程师',
  },
  {
    value: 'UI设计师',
    label: 'UI设计师',
  },
  {
    value: '产品经理',
    label: '产品经理',
  },
  {
    value: '测试工程师',
    label: '测试工程师',
  },
])
const options2 = ref([
  {
    value:"今日",
    label:"今日"
  },
  {
    value:"本周",
    label:"本周"
  },
  {
    value:"本月",
    label:"本月"
  },
  {
    value:"本季度",
    label:"本季度"
  },
  {
    value:"本年度",
    label:"本年度"
  },
  {
    value:"自定义",
    label:"自定义"
  }
])
watchEffect(()=>{
  if(value2.value == "自定义"){
    console.log("显示时间")
    timeFlag.value = true
  }else{
    console.log("隐藏")
    timeFlag.value = false
  }
})

// 底部列表
const tableData = ref([
  {
    name:"丽丽",
    zhiwei:"产品经理",
    title:"数字人",
    date:"2025-03-24",
    time:"32分钟",
    flag:"已完成",
    result:"通过",
    fen:"87/100",
  },
  {
    name:"丽丽",
    zhiwei:"产品经理",
    title:"数字人",
    date:"2025-03-24",
    time:"32分钟",
    flag:"已完成",
    result:"通过",
    fen:"87/100",
  },
  {
    name:"丽丽",
    zhiwei:"产品经理",
    title:"数字人",
    date:"2025-03-24",
    time:"32分钟",
    flag:"已完成",
    result:"通过",
    fen:"87/100",
  }
])

// 跳转面试记录
import router from '@/router'
const goMian = ()=>{
  router.push('/interviewRecord')
}


</script>

<style scoped lang="scss">
  .dataOverBox{
  width: 100%;
  padding-bottom: 60px;

  .navBox{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p{
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
  }

  .h{
    color: gray;
    font-size: 14px;
    margin-top: 4px;
  }

  .slectBox{
    width: 100%;
    height: 100px;
    background-color: #fff;
    box-shadow: 0 0 6px 1px #d7d2d2;
    border-radius: 3px;
    margin-top: 26px;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .slectLis{
      margin-right: 60px;

      p{
        margin: 0;
        margin-bottom: 3px;
      }
    }
  }

  .stats_row{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    .statsBox{
      width: 234px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 0 6px 1px #d7d2d2;
      padding: 20px;
      box-sizing: border-box;

      .numTit{
        font-size: 22px;
        font-weight: bold;
      }

      span{
        font-size: 13px;
        color: #888;
      }

      .numTxt{
        color: red;
        font-size: 12px;
        margin-top: 6px;
      }
    }
  }

  .card{
    width: 100%;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 6px 1px #d7d2d2;
    margin-top: 30px;

    .headerCard{
      height: 60px;
      padding-left: 20px;
      display: flex;
      align-items: center;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
    }

    .flagBox{
      padding: 6px 10px 6px 10px;
      color: rgba(231,76,60,1);
      background-color: #efe8e8;
      border-radius: 50%;
      text-align: center;
    }
  }
}

</style>